<template>
    <div class="body_bgi box_1 full bgs_full relative" ref="home_box">
      <!-- header -->
      <big-screen-header headerName="鄂尔多斯细毛羊种羊场种养交易追溯信息" />

      <!-- body -->
      <div class="w_full-60 h_full-140 m_0_auto flex_row_around">
        <!-- 1 -->
        <div class="w_30_p h_full flex_column_between">
          <!-- 种羊厂 -->
          <div class="w_full h_45_p chart_box_bgi_1 p_10">            
            <div class="main_color fw_bold fs_16 ls_2 flex_row_start flex_center">
              <div class="w_1 h_15 main_bgc main_border mr_10"></div> 种羊场
            </div>

            <div class="w_full h_full-40 flex_column_around mt_10">
              <div 
                class="w_full h_23_p p_5 cursor ls_1 fs_1vw flex_column_center border_radius_10" 
                :class="farmName == item.name ? 'main_bgc_color color_000' : 'bgc_1a396b78 color_fff'"
                v-for="(item, index) in farmList" :key="index"
                @click="clickFarm(item)"
              >
                <div class="text_center">{{ item.name }}</div> 
              </div>
            </div>
          </div> 

          <!-- 种公羊 交易信息统计-->
          <div class="w_full h_55_p chart_box_bgi_1 p_10">
            <data-chart 
              title="交易信息统计"
              path=''
              chartType="环状图"
              :chartData="chartData" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div> 
        </div>

        <!-- 2 -->
        <div class="w_40_p h_full ph_10 relative">
          <!--  地图 -->
          <div class="w_full h_full">
            <Xbehyq-map class="full" :seriesData="seriesData" @clickMap="clickMap" />
          </div>
        </div>

        <!-- 3 -->
        <div class="w_30_p h_full">
          <div class="full chart_box_bgi_1 p_10 flex_column_between">
            <div class="h_30 lh_30 main_color fw_bold fs_16 mb_10 ls_2 flex_row_start flex_center">
              <div class="w_1 h_15 main_bgc main_border mr_10"></div>种公羊交易记录
            </div>
            <dv-loading v-if="isLoading" class="color_fff">数据加载中...</dv-loading>

            <div class="w_full h_full-40 scroll_box overflow_auto" v-if="sellData.length">
              <div
                class="w_full border_box flex_row_between mb_10 bgc_1a396b78 border_radius_10 p_5" 
                v-for="(item, index) in sellData" :key="index"
                @click="clickSellItem(item)"
              > 
                
                <!-- 文字信息 -->
                <div class="w_full flex_column_center cursor relative color_fff ph_10">
                  <div class="w_full text_1 fs_10 flex_row_between">
                    <div class="main_color">种羊场: </div>
                    <div class="ellipsis">{{ item.farmName }}</div>
                  </div>
                  <div class="w_full text_1 fs_10 flex_row_between">
                    <div class="main_color">养殖户:</div>
                    <div class="ellipsis">{{ item.nickName }}</div>
                  </div>
                  <div class="w_full text_1 fs_10 flex_row_between">
                    <div class="main_color">苏木(镇):</div>
                    <div class="ellipsis">{{ item.townName }}</div>
                  </div>
                  <div class="w_full text_1 fs_10 flex_row_between">
                    <div class="main_color">嘎查(村):</div>
                    <div class="ellipsis">{{ item.villageName }}</div>
                  </div>
                  <div class="w_full text_1 fs_10 flex_row_between">
                    <div class="main_color">交易羊数量:</div>
                    <div class="ellipsis">{{ item.totalCount }} 只</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="w_full h_full-40 relative" v-show="!isLoading && !sellData.length">
              <div class="absolute_center color_fff">暂无养殖信息</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import CountFlop from '@/common/countFlop/index.vue';
  import defMixin from '@/mixins/def';
  import defImgMixin from '@/mixins/def-img';
  import componentsMixin from '@/mixins/components';

  import { getTownList } from '@/api/base/base.js';
  import {  
    getFarmList, 
    getSellPage,
    getShiYanHuList,
    getTownCattleCount
  } from '@/api/sheep/index.js';

  import { filePath } from "@/const"

  export default {
    name: 'Transaction',
    components: { CountFlop },
    mixins: [defMixin, defImgMixin, componentsMixin],
    data() {
      return {
        sheepList: [],

        filePath: filePath,
        isLoading: false,
        
        farmId: '',
        farmName: '',

        farmList: [],

        seriesData: [],

        townList: [],                   // 巴林右旗 所属 镇、苏木 
        sellData: [],
        sellList: [],
        chartData: {}
      }
    },
    computed: {

    },
    created() {
      
    },
    async mounted() {
      // this.getTownList()

      // 获取 种羊场列表
      this.getFarmList()
    },
    destroyed() {

    },
    methods: {
      // 获取  镇 苏木
      async getTownList() {
        let wsq_countyId = '150626000000'

        let res = await getTownList(wsq_countyId)
        try {
          if (res.code == 200) {
            this.townList = res.data
          }
        } catch(err) {
          console.log('获取所有镇数据失败 : ', err)
        }
      },
      
      // 种羊场 列表
      async getFarmList() {
        let res = await getFarmList()
        try {
          if (res.code == 200) {
            if (res.data && res.data.length) {
              this.farmList = res.data

              this.farmName = res.data[0].name
              this.farmId = res.data[0].id

              // 获取 羊 分布
              this.getTownCattleCount(150626000000, res.data[0].id)

              // 获取 种羊场 交易列表
              let params = {
                farmId: res.data[0].id,
                current: 1,
                size: 500,
              }
              this.getSellPage(params)
            }
          }
        } catch(err) {
          console.log('获取种羊场列表失败 : ', err)
        }
      },

      // 交易信息
      async getSellPage(params) {
        this.sellData = []
        this.sellList = []
        this.isLoading = true

        let res = await getSellPage(params)
        try {
          if (res.code == 200) {
            setTimeout(() => { 
              this.sellList = res.data
              this.sellData = res.data

              this.isLoading = false
            }, 500)
          }
        } catch(err) {
          console.log('获取交易信息列表失败 : ', err)
        }
      },

      // 羊分布 信息
      async getTownCattleCount(countyId, farmId) {
        let res = await getTownCattleCount(countyId, farmId)
        try {
          if (res.code == 200) {
            if (res.data && res.data.length) {
              let list = []
              for (let i in res.data) {
                if (res.data[i].totalCount)
                list.push({ name: res.data[i].townName, value: res.data[i].totalCount })
              }

              this.chartData = {
                unit: '只',
                data: list
              }

              this.seriesData = list
            }
          }
        } catch(err) {
          console.log('获取羊分布 信息失败 : ', err)
        }
      },

      // 获取 试验户
      async getShiYanHuList(isType) {
        let res = await getShiYanHuList(isType) 
        this.shiYanHuList = res.data
      },

      // 监听 点击 地图
      clickMap(val) {
        console.log('点击 地图 : ', val);
        this.sellData = []

        for(let i in this.sellList) {
          if(this.sellList[i].townName == val) {
            this.sellData.push(this.sellList[i])
          }
        }
      },

      // 点击 购买 记录
      clickSellItem(item) {
        this.$router.push({
          path: `/muHuPage/${item.townId}/${item.townName}/${item.villageId}/${item.villageName}/${item.muhuId}`
        })
      },

      // 监听 点击 种羊场
      clickFarm(item) {
        this.farmName = item.name
        this.farmId = item.id

        let params = {
          farmId: item.id,
          current: 1,
          size: 500,
        }
        this.getSellPage(params)

        // 获取 羊 分布
        this.getTownCattleCount(150626000000, item.id)
      },

       // 跳转到 牲畜详情页 
      clickAnimal(item) {
        this.$router.push(`/sheepDetail/${item.id}/${item.rfid}/null`)
      },

      // 跳转页面 
      goToPage(val) {
        this.$router.push({
          path: val
        })
      },
    }
  }
</script>

<style lang="less">

</style>
